<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <el-row>
        <el-col :span="12">产品编号：{{ product_no }}</el-col>
      </el-row>
      <!-- <el-row
        style="margin: 5px 0px"
        type="flex"
        justify="space-around">
        <el-col :span="12">
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-s-promotion"
            @click="handleTransferAction">
            在线调用
          </el-button>
        </el-col>
        <el-col
          :span="12"
          style="text-align: right"></el-col>
      </el-row> -->
      <table-list
        ref="tableList"
        :fields="tableDataColumn"
        :data="productListData"
        :pagination="true"
        :searchFunc="portraitComparisonList"
        :searchDefault="searchConditions"
        border></table-list>
    </el-card>
  </div>
</template>
<script>
import Transfer from '@/views/product/operator/phoneCheck/transfer';
import Detail from '@/views/product/credentials/portraitComparison/detail';
import { portraitComparisonList } from '@/api/product';
import TableList from '@/components/TableList/index';
export default {
  name: 'list',
  components: {
    TableList,
  },
  props: {
    product_no: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      portraitComparisonList,
      productListData: [],
      pageSize: 10,
      currentPage: 1,
      loading: false,
      total: 0,
      tableDataColumn: [
        {
          prop: 'id',
          searchName: 'id',
          label: 'ID',
          minWidth: '60',
          searchType: 'input',
          exact: true,
        },
        {
          prop: 'name',
          searchName: 'name',
          label: '姓名',
          minWidth: '120',
          searchType: 'input',
          baseSeachColumn: true,
        },
        {
          prop: 'id_card',
          searchName: 'id_card',
          label: '身份证',
          minWidth: '180',
          searchType: 'input',
        },
        {
          prop: 'origin_result',
          searchName: 'origin_result',
          label: '认证结果',
          minWidth: '220',
          searchType: 'input',
        },
        {
          prop: 'message',
          searchName: 'message',
          label: '描述',
          minWidth: '120',
        },
        {
          prop: 'is_charge',
          searchName: 'is_charge',
          label: '收费',
          searchType: 'select',
          options: [
            {
              value: 1,
              label: '扣费',
              color: '#67C23A',
            },
            {
              value: 0,
              label: '不扣费',
              color: '#F56C6C',
            },
          ],
          minWidth: '120',
        },
        {
          prop: 'user.nick_name',
          label: '用户',
          minWidth: '120',
        },
        {
          prop: 'created_at',
          searchName: 'created_at',
          label: '创建时间',
          minWidth: '180',
          searchType: 'dateTime',
        },
        {
          label: '操作',
          searchField: false,
          render: (h, scope) => {
            return (
              <div>
                <el-button
                  size='mini'
                  type='text'
                  onClick={() => {
                    this.showDetailAction(scope.row);
                  }}>
                  查看
                </el-button>
              </div>
            );
          },
          fixed: 'right',
          minWidth: '160',
        },
      ],
    };
  },
  computed: {
    searchConditions() {
      return {
        user_id: this.$store.state.user.info.id,
        product_no: this.product_no,
      };
    },
  },
  methods: {
    handleTransferAction() {
      this.showTransferAction();
    },
    showTransferAction() {
      this.$createDialog({
        title: '在线调用',
        component: Transfer,
        width: '40%',
        props: {
          productNo: this.product_no,
        },
        buttons: [{ text: '提交', callback: 'handleSubmit', name: 'submit' }],
        onClose: () => {
          this.$refs.tableList.resetAction();
        },
      });
    },
    showDetailAction(row) {
      this.$createDialog({
        title: '详情',
        component: Detail,
        width: '40%',
        props: {
          formData: row,
        },
      });
    },
  },
};
</script>
